import React from 'react'
import PropTypes from 'prop-types'



// 受控组件
class Button1 extends React.Component {
    state = {
        name: 'Brave',
        age: 'age',
        val: 'val',
        content: 'content',
        checkout: false,
        select: 'select'

    }
    // AddAge = (e) => {
    //     this.setState({
    //         age:e.target.value
    //    })
    // }
    // onInput = (e) => {
    //     console.log(e.target)
    //     console.log(e)
    //     this.setState({
    //         val:e.target.value
    //     })
    // }
    // onText = (e) => {
    //     this.setState({
    //         content: e.target.value
    //     })
    // }
    // select = (e) => {
    //     this.setState({
    //         select: e.target.value
    //     })
    // }
    // checkout = (e) => {
    //     this.setState({
    //         checkout:e.target.checked
    //     })
    // }
    change = (e) => {
        const target = e.target
        const value = target.type === 'checkbox' ? target.checked : target.value
        const name = target.name
        this.setState({
            [name]: value
        })
    }
    render() {
        return (
            <div>
                {/* {} */}
                <input name="age" type="text" value={this.state.age} onChange={this.change}></input><br />
                <h2>{this.state.name}----{this.state.age}</h2>
                <input name="val" type="text" value={this.state.val} onChange={this.change}></input><br />
                <textarea name="content" col="10" row="6" value={this.state.content} onChange={this.change}></textarea><br />
                <select name="select" id="" value={this.state.select} onChange={this.change}>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                </select><br />
                <input name="checkout" type="checkbox" checked={this.state.checkout} onChange={this.change}></input><br />
            </div>
        )
    }
}

// 非受控组件
class Button2 extends React.Component {
    constructor() {
        super()
        this.state = {
            name: 'Brave',
            age: ''
        }
        this.refText = React.createRef()
    }
    handel = () => {
        console.log(this.refText.current.value)
        this.setState({
            age: this.refText.current.value
        })
    }
    render() {
        return (
            <div>
                <input type="text" ref={this.refText} value={this.state.age} onChange={this.handel}></input>
            </div>
        )
    }
}

// 评论列表
class Button3 extends React.Component {
    state = {
        list: [
            { id: 1, name: 'Brave', content: '今天天气不错' },
            { id: 2, name: '张杰', content: '我是傻逼' },
            { id: 3, name: '还是张杰', content: '再说一次我是傻逼' }
        ],
        user: '',
        userContent: ''

    }
    list() {
        if (this.state.list.length === 0) {
            return (
                <div>
                    暂无评论，快去评论把
                </div>
            )
        }
        return (
            <div>
                <ul>
                    {this.state.list.map(item => (
                        <li key={item.id}>
                            <h3>{item.name}</h3>
                            <p>{item.content}</p>
                        </li>
                    ))}
                </ul>
            </div>
        )
    }
    handel = (e) => {
        const { name, value } = e.target
        this.setState({
            [name]: value
        })
    }
    submit = () => {
        const { list, user, userContent } = this.state
        if (user.trim() === '' || userContent.trim() === '') {
            alert("请输入内容")
            return
        }
        const newList = [
            {
                id: Math.random(),
                name: user,
                content: userContent
            },
            ...list
        ]

        this.setState({
            list: newList
        })
    }
    render() {
        return (
            <div className="div">
                <div>
                    <div>评论人：<input name="user" type="text" value={this.state.user} onChange={this.handel}></input></div>
                    <div>评论内容：<textarea name="userContent" row="6" col="10" value={this.state.UserContent} onChange={this.handel}></textarea></div>
                    <div><button onClick={this.submit}>提交</button></div>
                </div>
                {this.list()}
            </div>
        )
    }

}


// 组件通讯
// 传递方法
// ReactDOM.render(<Com1 name="BraveY" />,document.getElementById('root'))
// 1. 类组件
class Com1 extends React.Component {
    render() {
        return (
            <div>
                {this.props.name}
            </div>
        )
    }
}
// 2.函数组件
function Com2(props) {
    return (
        <div>
            {props.name}
            <div></div>
        </div>
    )
}
// 3.super()
class Com3 extends React.Component {
    constructor(props) {
        super(props)
        console.log(props)
    }
    render() {
        return (
            <div>
                <div>{this.props.name}</div>
                <div>{this.props.name}</div>
                <div>{this.props.name}</div>
            </div>
        )
    }
}


// 组件传值
// 1.父传子
class Dad extends React.Component {
    state = {
        name: 'Brave'
    }
    render() {
        return (
            <div>
                我是dad组件
                <Son name={this.state.name}></Son>

            </div>
        )
    }
}

class Son extends React.Component {
    render() {
        return (
            <div>
                我是son-----{this.props.name}
            </div>
        )
    }
}

// 2.子传父
class Bear1 extends React.Component {
    state = {
        name: ''
    }

    getDate = (props) => {
        console.log(props)
        this.setState({
            name: props
        })
    }
    render() {
        return (
            <div>
                <Bear2 getDate={this.getDate}></Bear2>

                <div>{this.state.name}</div><br />
            </div>
        )
    }
}
class Bear2 extends React.Component {
    state = {
        age: 18
    }
    handel = () => {
        this.props.getDate(Math.random())
    }
    render() {
        return (
            <div>
                <button onClick={this.handel}>向父组件中传值</button>
            </div>
        )
    }
}

// 3.兄弟组件传值
class User extends React.Component {
    state = {
        user: '',
        age: 18
    }
    getDate = (props) => {
        this.setState({
            user: props
        })
    }
    render() {
        return (
            <div>
                {this.state.user}<br />
                <Qq getDate={this.getDate} age={this.state.age} user={this.state.user}></Qq>
                <WeiXin user={this.state.user}></WeiXin>
            </div>
        )
    }
}

class Qq extends React.Component {
    state = {
        name: 'Brave-Y'
    }
    handel = () => {
        this.props.getDate(this.state.name)
    }
    render() {
        return (
            <div>
                我是qq组件,我将要传值给WeiXin组件---{this.props.user}<br />
                <button onClick={this.handel}>传值给WeiXin</button>
            </div>
        )
    }
}

class WeiXin extends React.Component {
    render() {
        return (
            <div>
                我是WeiXin组件，我接受来自QQ的值----{this.props.user}
            </div>
        )
    }
}



// context 组件传值
const { Provider, Consumer } = React.createContext()

class Pro extends React.Component {
    state = {
        name: 'Brave',
        age: 18
    }
    render() {
        return (
            <Provider value={this.state.name}>
                <div>
                    <Con1></Con1>
                </div>
            </Provider>
        )
    }

}

class Con1 extends React.Component {

    render() {
        return (
            <div>
                <Con2></Con2>
            </div>
        )
    }
}
class Con2 extends React.Component {
    render() {
        return (
            <Consumer>
                {
                    data => (
                        <div>
                            接受父组件的参数：{data}
                        </div>
                    )
                }
            </Consumer>
        )
    }
}



// props深入
class App extends React.Component {
    render() {
        return (
            <div>
                {this.props.children}
            </div>
        )
    }
}

const handel = () => {
    console.log('我是函数')
}

// ReactDOM.render(<App>666</App>,document.getElementById('root'))

// class Props extends React.Component{
//     render() {
//         return (
//             <div>
//                 {this.props.num}
//             </div>
//         )
//     }
// }
// Props.PropTypes = {
//     num: PropTypes.number
// }
// Props.defaultProps = {
//     num: 18
// }



export default Pro